/*--------------------------------------------------
    [TRANSITION]
----------------------------------------------------*/
/* Cubic Bezier Transition */
/***
Login page
***/
/* logo page */
body{
  height: 100%;
  width: 100%;
  background-color: #666;
}

.login .content {
  background: rgba(0, 0, 0, 0.4);
  width: 360px;
  margin: 0 auto;
  margin-bottom: 0px;
  padding: 20px;
  padding-top: 20px;
  padding-bottom: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  margin-top: calc(50vh - 130px);
}

.login .content h3 {
  color: #eee;
}

.login .content h4 {
  color: #eee;
}

.login .content p,
.login .content label {
  color: #fff;
}

.login .content .login-form,
.login .content .forget-form {
  padding: 0px;
  margin: 0px;
  padding-top: 10px;
}

.login .content .form-control {
  background-color: rgba(0, 0, 0, 0.4);
}

.login .form-control {
    color: #fff;
    border: 1px solid #999999;
}
.login .form-control:focus, .login .form-control:hover {
    border: 1px solid #fefefe;
}


.login .content .form-title {
  font-weight: 300;
  margin-bottom: 25px;
}

.login .content .form-actions {
  background-color: transparent;
  clear: both;
  border: 0px;
  padding: 0px 30px 10px 30px;
  margin-left: -30px;
  margin-right: -30px;
}
@media (max-width: 480px) {
  /***
  Login page
  ***/
  .login .logo {
    margin-top: 10px;
  }

  .login .content {
    padding: 30px;
    width: 222px;
  }

  .login .content h3 {
    font-size: 22px;
  }

  .login .checkbox {
    font-size: 13px;
  }
}

